require('../../less/controls/button_group.less');
var React = require('react');
var Button = require('./Button');

module.exports = React.createClass({
	displayName:'ButtonGroup',
	getInitialState:function(){
		return {

		}
	},
	componentDidMount:function(){

	},
	__onClick: function (props, event, btn){
		this.props.onClick && this.props.onClick(props, event, btn);
	},
	render:function(){
		return (
			<div className={"c-button-group " + (this.props.skin||'') + " float-" + (this.props.floatDirection||'left')} style={this.props.style}>
				{
					this.props.items && this.props.items.map(function (item, index){
						item.onClick = item.onClick || this.__onClick;
						item.float = item.float || this.props.floatDirection || 'left';
						return <Button key={index} {...item} />;
					}.bind(this))
				}
				{this.props.children}
			</div>
		);
	}
});
